<template>
  <div class="base ">
    <Load v-show="loading"/>
    <div style="width: 100%;height: 100%; position: absolute">
      <birds/>
    </div>
    <!-- 注册登录界面 -->
    <div v-show="!loading" class="loginAndRegist lightSpeedIn animated">
      <!--登录表单-->
      <div  class="loginArea">
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 标语 -->
          <div v-show="isShow" class="title">
            LOGIN
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 密码框和用户名框 -->
          <div v-show="isShow" class="pwdArea">

            <el-form :model="loginUser" :rules="rules" ref="userForm">
              <el-form-item prop="username">
                <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="loginUser.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="loginUser.password"></el-input>
              </el-form-item>
              <div class="yzmBtn">
                
                <el-button type="primary" size="medium"  @click="getCode"
                >人机验证
                </el-button>
                <br></br>
                <el-button type="primary" size="medium"  @click="getCode"
                >人脸识别
                </el-button>
                <div class="icon" v-show="yzm">
                  <i class="el-icon-check"></i>
                </div>
              </div>

            </el-form>
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 登录注册按钮 -->
          <div v-show="isShow" class="btnArea">
            <el-button size="medium" type="primary" round style="background-color: #55a2ff;width: 200px" @click="UserLogin"  >登录</el-button>
          </div>
        </transition>
      </div>
      <!-- 注册表单 -->
      <div class="registArea">
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--  注册表头-->
          <div v-show="!isShow" class="rigestTitle">
            加入我们
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--            注册表单-->
          <div  v-show="!isShow" class="registForm">
            <el-form :model="regUser" :rules="regrules" ref="resuserForm">

              <el-form-item prop="username">
                <el-input placeholder="输入账号" size="medium  " style=" margin-top: 20px; "  prefix-icon="el-icon-user" v-model="regUser.username"></el-input>
              </el-form-item>

              <el-form-item prop="password" >
                <el-input placeholder="密码" size="medium " style="  " prefix-icon="el-icon-lock " show-password v-model="regUser.password"></el-input>
              </el-form-item>

              <el-form-item prop="confirmPassword">
                <el-input placeholder="请确认密码" size="medium " style="" prefix-icon="el-icon-lock" show-password v-model="regUser.confirmPassword"></el-input>
              </el-form-item>

              <el-form-item prop="nickname">
                <el-input placeholder="输入昵称" size="medium " style=" "  prefix-icon="el-icon-s-custom" v-model="regUser.nickname"></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input placeholder="请输入手机号" prefix-icon="el-icon-phone" v-model="regUser.phone" size="medium ">
<!--                  <i slot="prefix" class="el-icon-phone"></i>-->
                </el-input>
              </el-form-item>
              <el-form-item prop="codeUI">
                <div class="yzmBtn">
                  <el-button type="primary" size="medium"  @click="getCode"
                  >人机验证
                  </el-button>
                  <div class="icon" v-show="yzm">
                    <i class="el-icon-check"></i>
                  </div>
                </div>

<!--                <el-row :gutter="20">-->
<!--                  <el-col :span="16">-->
<!--                    <el-input placeholder="请输入验证码" v-model="regUser.codeMsg" maxlength="4" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">-->
<!--                      <i slot="prefix" class="el-icon-tickets"></i>-->
<!--                    </el-input>-->
<!--                  </el-col>-->
<!--                  <el-col :span="6">-->
<!--                    <el-button @click="sendCode" :disabled="disabled">{{btnText}}</el-button>-->
<!--                  </el-col>-->
<!--                </el-row>-->
              </el-form-item>
            </el-form>
          </div>
        </transition>
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!--            注册按钮-->
          <div  v-show="!isShow" class="registBtn">
            <el-button type="primary" size="medium" round style="background-color: #55a2ff;width: 200px" @click="userRegister">注册</el-button>
          </div>
        </transition>
      </div>
      <!-- 信息展示界面 -->
      <div id="aaa" class="showInfo"
           :style="{
             borderTopRightRadius:styleObj.bordertoprightradius,
             borderBottomRightRadius:styleObj.borderbottomrightradius,
             borderTopLeftRadius:styleObj.bordertopleftradius,
             borderBottomLeftRadius:styleObj.borderbottomleftradius,
             right:styleObj.rightDis
            }"
           ref="showInfoView">

        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 没有用户输入用户名或者找不到用户名的时候 -->
          <div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 30px;color: #FFFFFF;font-weight: bold">
              欢迎您使用校园博客
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="primary" size="medium" style="background-color:#55a2ff;border: 1px solid #b3d2ff;" round @click="changeToRegiest">还没有账户？点击注册</el-button>
            </div>
          </div>
        </transition>
        <!-- 用户输入用户名时展示头像以及姓名 -->
        <!--           <div>-->

        <!--           </div>-->
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 用户注册的时候展示信息 -->
          <div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
              欢迎注册
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="primary" size="medium" style="background-color:#55a2ff;border: 1px solid #90cfff;" round @click="changeToLogin">已有账户？点击登录</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>

    <div>
      <!-- 登录时的滑动图片验证码,覆盖整个页面 -->
      <div class="mask" v-show="isShowSlide" @click.self="isShowSlide = false">
        <div class="slideContainer">
          <SlideVerify ref="slideblock" :successFun="successVerify"></SlideVerify>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import birds from '@/common/bg/birds.vue'
import SlideVerify from "@/common/yzm/slideverify";
import {setRouters} from "@/router";
import Load from "@/common/Load";

// import 'animate.css';
export default {

  name:'Login',
  components: { birds,SlideVerify,  Load },
  data(){
    let checkUsername = (rule, value, callback) =>{
      if(!value){
        return callback(new Error('账号不能为空'))
      }else{
        let reg = /^[0-9]+.?[0-9]*$/
        if(!reg.test(value)){
          callback()
        }else{
          return callback(new Error('账号不能是纯数字'))
        }
      }
    }

    let checkPhone = (rule, value, callback) =>{
      if(!value){
        return callback(new Error('手机号不能为空'))
      }else{
        let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if(reg.test(value)){
          callback()
        }else{
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error("密码长度为6-18位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
          if (!value) {
            callback(new Error("请输入确认密码"));
          }

      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.regUser.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return{
      loading: false,
      isShowSlide: false,
      yzm: false,
      //看看用不用转成用户对象
      loginUser:{
        name:"",
        password:""
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}
        ],
      },
      regrules:{
        username: [
          {required: true,validator: checkUsername, trigger: 'blur'},
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          {validator: checkPhone, trigger: 'change'}
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      },
      admins:{},
      ////看看用不用转成用户对象
      regUser:{},
      disabled: false,
      codeMsg:"", //验证码
      btnText: '发送验证码',
      styleObj:{
        bordertoprightradius:'15px',
        borderbottomrightradius: '15px',
        bordertopleftradius:'0px',
        borderbottomleftradius:'0px',
        rightDis:'0px'
      },
      isShow:true
    }
  },
  created() {
    this.loading =true;
    setTimeout(()=>{
      this.loading =false;
    },2000)
  },
  methods:{
    getCode(){
      this.isShowSlide = true;
      // 触发方法，每次打开遮罩层都刷新组件
      this.$bus.$emit('resetSlideVerify')
    },
    //验证码验证成功
    successVerify(){
      this.yzm = true;
      this.isShowSlide = false;

    },
    changeToRegiest(){
      this.styleObj.bordertoprightradius= '0px'
      this.styleObj.borderbottomrightradius='0px'
      this.styleObj.bordertopleftradius='15px'
      this.styleObj.borderbottomleftradius='15px'
      this.styleObj.rightDis='50%'
      this.isShow = !this.isShow
    },
    changeToLogin(){
      this.styleObj.bordertoprightradius= '15px'
      this.styleObj.borderbottomrightradius='15px'
      this.styleObj.bordertopleftradius='0px'
      this.styleObj.borderbottomleftradius='0px'
      this.styleObj.rightDis='0px'
      this.isShow = !this.isShow
    },
    UserLogin(){
      this.$refs["userForm"].validate((valid) => {
        if (valid && this.yzm===true) {
          this.loading =true;
          //表单校验合法
          this.request.post("/user/login",this.loginUser).then(res=>{
            if(res.code === "200"){
              this.loading =true;
              localStorage.setItem("user",JSON.stringify(res.data.data))  //存储用户信息到浏览器
              localStorage.setItem("token",res.data.token)
              //动态路由设置当前用户的路由权限
              setRouters();
              this.openFullScreen2(res);
            }else {
              this.openFullScreen2(res);
            }
          })
        } else {
          this.$message.info("请检查")
          return false;
        }
      });

    },
    openFullScreen2(res) {

      setTimeout(() => {
        if(res.code === "200"){
          this.$message.success("登陆成功欢迎你：" + res.data.data.nickname)
          if(res.data.data.role !== "ROLE_ADMIN"){
            this.$router.push("/front/home")
          }else{
            this.$router.push("/blogHome")
          }
        }else {
          this.loading =false;
          this.$message.error(res.msg)
        }


      }, 5000);
    },

    //用户注册
    userRegister(){
      //表单校验合法
      if(this.yzm===true){


        const loading = this.$loading({
          lock: true,
          text: '注册信息中,请稍等~',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        setTimeout(() => {
          this.request.post("/user/register",this.regUser).then(res=>{
            if(res.code === "200"){
              this.$notify({
                title: '恭喜你注册成功',
                message: '尊敬的用户你已注册成功成为我们的一员',
                type: 'success'
              });
              this.changeToLogin();
              this.yzm = false;
              loading.close();
            }else {
              this.$message.error(res.msg)
            }
          })
        }, 2000);
      }
    },
    sendCode(){
      if(this.codeMsg === ""){
        this.disabled = true
        this.request.post("/user/sendMsg",this.user).then(res =>{
          if(res.code === "200"){
            console.log(res.data)
            this.$message.error(res.msg)
          }else {
            this.$message.error(res.msg);
          }
        })

        // 1.时间开始倒数
        // 2.按钮进入禁用状态
        // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
        // 4.倒计时的过程中 按钮文字为 多少s后重新发送
        let timer = setInterval(()=>{
          this.time --;
          this.btnText = `${this.time}s后重新发送`
          this.disabled = true
          if(this.time <= 0){
            this.disabled = false;
            this.btnText = '重新发送';
            this.time = this.countDown
            clearInterval(timer)
          }
        }, 1000)
      }
    },
  },

}
</script>

<style lang="less" scoped>
/* @import '../assets/css/Login.css' */
.base{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100%;
}
.GridBackground {
  height: inherit;
  background: -webkit-linear-gradient(
      top,
      transparent 0.3373rem,
      rgba(255, 255, 255, 0.1) 0.3494rem
  ),
  -webkit-linear-gradient(left, transparent 0.3373rem, rgba(
          255,
          255,
          255,
          0.1
      )
      0.3494rem);
  background-size: 0.3494rem 0.3494rem;
}

.loginAndRegist{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loginArea{
  background-color: rgba(255,255,255,0.8);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 500px;
  width: 450px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.registArea{
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 500px;
  width: 450px;
  background-color: rgba(255,255,255,0.8);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content:center ;
  align-items: center;
}
.showInfo{
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  height: 500px;
  width: 450px;
  z-index:2;
  top: 0;
  right: 0;
  background-image: url("../../assets/login.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.showInfo:hover{
  transform: scale(1.1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;

  /*background-position: -50px -50px;*/
}
.title{
  width: 70%;
  flex:1;
  border-bottom: 1px solid #55a2ff;
  display: flex;
  align-items: center;
  color: #55a2ff;
  font-weight: bold;
  font-size: 30px;
  display: flex;
  justify-content: center;
}
#aaa{
  transition: 0.3s linear;
}
.pwdArea{
  width: 90%;
  flex:2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  div{
    //width: 300px;
      .input{
        width: 300px;
        outline: none;
        height: 40px;
        border-radius: 25px ;
        padding-left: 10px;
        font-size: 25px;
        border: 1px solid gray;
      }

  }


}
.pwdArea div input:focus{
  border: 2px solid #55a2ff;
}
.btnArea{
  flex:1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rigestTitle{
  width: 70%;
  flex: 1;
  color: #55a2ff;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #55a2ff;
}
.registForm{
  flex: 2;
  display: flex;
  flex-direction: column;
  color: #55a2ff;
  font-size: 16px;
}

.registForm input{
  outline: none;
  height: 30%;
  border-radius:13px ;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}
.registForm input:focus{
  border: 2px solid #55a2ff;
}
#elselect:focus{
  border: 2px solid #55a2ff;
}
.registBtn{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}
.mask .slideContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 380px;
  height: 250px;
  background-color: rgb(255, 255, 255);
}

.yzmBtn{
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon{
    margin-left: 40px;
    color: green;
    font-size: 30px;
  }
}











/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }
  60% {
    -webkit-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1
  }
  80% {
    -webkit-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1
  }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out
}


</style>